<template>
  <div v-loading="loading" class="app-container">
    <el-row :gutter="20">
      <el-col v-for="(item,index) in dataList" :key="'f-'+index" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <el-card style="height: 270px" :style="{background: item.backGroundColor,color: item.fontColor}">
          <div slot="header" class="clearfix">
            <el-image :src="item.logo" />
          </div>
          <div class="custom-el-body">
            <div class="custom-el-line">
              <div class="line-left">栏目背景色</div>
              <div class="line-right" :style="{background: item.columnGroundColor}" />
            </div>
            <div class="custom-el-line">
              <div class="line-left">栏目标题色</div>
              <div class="line-right" :style="{background: item.columnTitleGroundColor}" />
            </div>
            <div class="custom-el-line">
              <div class="line-left">标题字体色</div>
              <div class="line-right" :style="{background: item.columnTitleFontColor}" />
            </div>
            <div class="custom-el-line">
              <div class="line-left">选中背景色</div>
              <div class="line-right" :style="{background: item.changeBackGroundColor}" />
            </div>
            <div class="custom-el-line">
              <div class="line-left">选中字体色</div>
              <div class="line-right" :style="{background: item.changeFontColor}" />
            </div>
            <div class="custom-el-line">
              <div class="line-left">边框颜色</div>
              <div class="line-right" :style="{background: item.borderColor}" />
            </div>
          </div>
          <div class="custom-el-name"><i class="el-icon-s-operation" />&nbsp;&nbsp;&nbsp;&nbsp;{{ item.name }}</div>
          <div class="custom-el-footer">
            <div class="footer-button">
              <el-button type="text" icon="el-icon-setting" @click="toEdit(item)">设置</el-button>
            </div>
            <div class="footer-button">
              <el-button type="text" icon="el-icon-delete" @click="toDelete(item)">删除</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <el-card style="height: 270px">
          <div class="custom-el-li" @click="toAdd">
            <i class="el-icon-plus" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <theme-entity ref="entity" @fetch-data="callBack" />
  </div>
</template>
<script>
import { queryAllTheme, deleteObject } from '@/api/system/theme/index'
import ThemeEntity from './entity/index.vue'
export default {
  name: 'ThemeIndex',
  components: { ThemeEntity },
  data() {
    return {
      dataList: [],
      rowId: [],
      loading: false
    }
  },
  created() {
    this.initAll()
  },
  methods: {
    initAll() {
      this.loading = true
      queryAllTheme().then(res => {
        const { data } = res
        this.dataList = data.data
        this.loading = false
      }).catch(() => {
        this.dataList = []
        this.loading = false
      })
    },
    toAdd() {
      this.$refs.entity.openEntity()
    },
    toDelete(data) {
      if (data.id !== null && undefined !== data.id) { // 单个删除
        this.rowId = []
        this.rowId.push(data.id)
        this.$confirm('此操作将永久删除' + data.name + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteObject(this.rowId).then(res => {
            this.$message.success('删除成功！')
            this.initData()
            this.rowId = []
          }).catch(() => {
            this.$message.error('删除失败！')
          })
        }).catch(() => {
          this.$message.success('取消删除成功！')
        })
      }
    },
    toEdit(data) {
      this.$refs.entity.openEntity(data)
    },
    callBack() {
      this.initAll()
    }
  }
}
</script>

<style scoped>
.app-container {
  display: block !important;
}
.custom-el-li {
  width: 100%;
  cursor: pointer;
  line-height: 270px;
  text-align: center;
  font-size: 60px;
  color: #909399;
}
.custom-el-body {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: row wrap;
}
.custom-el-line {
  display: flex;
  flex-flow: row nowrap;
  flex: 0 1 auto;
  width: 50%;
  height: 35px;
  font-size: 13px;
  text-align: left;
  padding: 10px;
  box-sizing: border-box;
}
.custom-el-footer {
  display: flex;
  flex-flow: row nowrap;
}
.custom-el-name,.custom-el-footer {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  text-align: left;
  border-top: 1px solid #e6ebf5;
  padding: 0px 10px;
  box-sizing: border-box;
}
.footer-button {
  width: 50%;
  flex: 0 1 auto;
  text-align: center;
}
.line-left{
  flex: 1 1;
  height: 100%;
}
.line-right {
  flex: 0 1 auto;
  width: 20px;
  height: 100%;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.el-image {
  height: 40px;
}
.el-card ::v-deep .el-card__body {
  padding: 0px;
  box-sizing: border-box;
}
</style>
